<script setup lang="ts">
import { useAppStore } from '@/store';
import EventCollection from '@/pages/home/eventCollection';

interface IProps {
  data: IBtnFormatsList[][];
}

const props = defineProps<IProps>();
const store = useAppStore();

// 点击事件处理
const handlePress = (item: IBtnFormatsList) => {
  EventCollection.onPress(item, 3);
  store.$patch({ btnInformation: { ...item, moduleType: 3 } as IServerBtnListBtnList });
};

// 长按事件处理
const handleLongPress = (item: IBtnFormatsList) => {
  EventCollection.onLongPress(item);
  store.$patch({ btnInformation: { ...item, moduleType: 3 } as IServerBtnListBtnList });
};
</script>

<template>
  <swiper :indicator-dots="props.data.length > 1" indicator-active-color="#ffc300" style="height: 90px">
    <swiper-item v-for="(item, index) in props.data" :key="index">
      <view class="p-[8px] w-full h-full box-border grid grid-cols-3 gap-2">
        <image v-for="(i, index) in item" style="width: 100%; height: 100%" :src="i.value" mode="aspectFill" :key="index" @click="handlePress(i)" @longpress="handleLongPress(i)" />
      </view>
    </swiper-item>
  </swiper>
</template>
